<template>
  <div class="home">
    <header class="header">
      <h1>王小白杂货店</h1>
      <!-- 添加搜索框 -->
      <div class="search-box">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="百度一下..."
          @keyup.enter="handleSearch"
        >
        <button @click="handleSearch">
          <i class="fas fa-search"></i>
        </button>
      </div>
    </header>

    <main class="nav-container">
      <div class="nav-section" v-for="(section, index) in navLinks" :key="index">
        <h2>{{ section.title }}</h2>
        <div class="nav-grid">
          <a
            v-for="(link, linkIndex) in section.links"
            :key="linkIndex"
            :href="link.url"
            class="nav-item"
            target="_blank"
          >
            <div class="nav-icon">
              <i v-if="!link.iconType" :class="link.icon"></i>
              <custom-icon v-else :name="link.icon" style="font-size: 26px;"></custom-icon>
            </div>
            <div class="nav-text">
              <h3>{{ link.name }}</h3>
              <p>{{ link.desc }}</p>
            </div>
          </a>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>

import { ref } from 'vue'
import CustomIcon from '@/components/CustomIcon'

const searchQuery = ref('')

const handleSearch = () => {
  if (searchQuery.value.trim()) {
    const searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(searchQuery.value)}`
    window.open(searchUrl, '_blank')
  }
}

const navLinks = [
  {
    title: '常用导航',
    links: [
      {
        name: 'Google',
        url: 'https://www.google.com',
        desc: '全球最大的搜索引擎',
        icon: 'fas fa-search',
      },
      {
        name: 'GitHub',
        url: 'https://github.com',
        desc: '代码托管平台',
        icon: 'fab fa-github'
      },
      {
        name: 'MDN',
        url: 'https://developer.mozilla.org',
        desc: 'Web开发文档',
        icon: 'fas fa-book'
      },
      {
        name: 'Vue.js',
        url: 'https://vuejs.org',
        desc: 'Vue官方文档',
        icon: 'fab fa-vuejs'
      },
    ]
  },
  {
    title: '即兴工具',
    links: [
      {
        name: '圣诞树',
        url: '/christmasTree',
        desc: '瞎画的圣诞树',
        icon: 'icon-christmas-tree',
        iconType: 'custom'
      },
      {
        name: '烟花',
        url: '/firework',
        desc: '花哨的烟花',
        icon: 'icon-firework',
        iconType: 'custom'
      },
      {
        name: 'threejs练习',
        url: '/threejsPractice',
        desc: 'threejs练习',
        icon: 'icon-firework',
        iconType: 'custom'
      },
      {
        name: 'threejsGUI',
        url: '/threejsGUI',
        desc: 'threejsGUI',
        icon: 'icon-firework',
        iconType: 'custom'
      },
      {
        name: 'threejsPractice1',
        url: '/threejsPractice1',
        desc: 'threejs练习1',
        icon: 'icon-firework',
        iconType: 'custom'
      },
    ]
  }
]
</script>

<style scoped>
.home {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.header h1 {
  font-size: 2.5rem;
  color: #2c3e50;
}

.nav-section {
  margin-bottom: 40px;
}

.nav-section h2 {
  margin-bottom: 20px;
  color: #34495e;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s;
}

.nav-item:hover {
  transform: translateY(-2px);
}

.nav-icon {
  font-size: 24px;
  margin-right: 15px;
  color: #3498db;
}

.nav-text h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #2c3e50;
}

.nav-text p {
  margin: 5px 0 0;
  font-size: 0.9rem;
  color: #7f8c8d;
}

/* 添加搜索框样式 */
.search-box {
  margin: 20px auto;
  max-width: 600px;
  display: flex;
  gap: 10px;
}

.search-box input {
  flex: 1;
  padding: 12px 20px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 24px;
  outline: none;
  transition: border-color 0.3s;
}

.search-box input:focus {
  border-color: #4285f4;
}

.search-box button {
  padding: 0 24px;
  background: #4285f4;
  color: white;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-box button:hover {
  background: #3367d6;
}

</style>

<style>
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
